<template>
  <view class="search-wrap" @click="handleDate">
    <view class="search" :class="white? 'white':''">
      <image src="/static/images/common/search.png"></image>
      <input type="text" v-model="info" :placeholder="placeholder" @input="handleSearch" @confirm="handleSubmit" confirm-type="search" :disabled="disabled">
    </view>
  </view>  
</template>
<script>
export default {
  name: 'Search',
	props: {
		white: {
			type: Boolean,
			default: false
		},
		placeholder:{
			type: String,
			default: '搜索'
		},
		disabled:{
			type: Boolean,
			default: false
		},
		searchContent: {
			type: Number | String,
			default: 0
		}
	},
	data() {
		return {
			info: ''
		}
  },
  watch: {
    white: {
      handler: function(val) {
				console.log(val)
			},
			immediate: true
    },
		searchContent(val) {
			this.info = val
		}
  },
	methods:{
		handleSearch() {
			console.log(this.info)
			this.$emit('search',this.info)
		},
		handleSubmit() {
			if (this.info === '') {
				uni.showToast({
					icon: 'none',
					title: '输入内容不能为空',
					duration: 1500
				})
				return
			}
			this.$emit('submit', this.info)
		},
		handleDate(){
			this.$emit('showDate')
		}
	}
}
</script>
<style lang="scss" scoped>
.search-wrap {
  width: 100%;
  padding: 0 20upx;
  box-sizing: border-box;
  .search{
    width: 100%;
    height:67upx;
    background:rgba(240,240,240,1);
    border-radius:33px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  image{
    width: 40upx;
    height: 40upx;
    margin-left: 30upx;
    margin-right: 10upx;
  }
  input {
    flex: 1;
    padding-right: 10upx;
    box-sizing: border-box;
    font-size:30upx;
    color: #333;
		display: flex;
		align-items: center;
  }
  .search.white{
		background-color: #fff;
	}
}
</style>

